<template>
	<view class="content">

		<!-- 区域选择 -->
		<view class="uni-list">

			<picker @change="bindPickerChange" :value="index" :range="array">
				<view class="uni-input">
					<view class="text">{{array[index]}}</view>
					<view><svg t="1689822276117" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="2290" width="15" height="15">
							<path
								d="M535.466667 812.8l450.133333-563.2c14.933333-19.2 2.133333-49.066667-23.466667-49.066667H61.866667c-25.6 0-38.4 29.866667-23.466667 49.066667l450.133333 563.2c12.8 14.933333 34.133333 14.933333 46.933334 0z"
								fill="#ffffff" p-id="2291"></path>
						</svg></view>
				</view>


			</picker>

		</view>

		<!-- 背景 -->
		<view class="contentBac">


			<!-- 轮播图 -->

			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :autoplay="autoplay" :interval="interval" :duration="duration">
					<!-- 轮播1 -->
					<swiper-item>
						<view class="lunbo1"></view>
					</swiper-item>
					<!-- 轮播2 -->
					<swiper-item>
						<view class="lunbo2"></view>
					</swiper-item>
					<!-- 轮播3 -->
					<swiper-item>
						<view class="lunbo3"></view>
					</swiper-item>
				</swiper>
			</view>
		</view>


		<!-- 滚动通知 -->
		<view>
			<u-notice-bar class="notification" bgColor="#fff" color="#080" speed="60px" :text="text1"
				url="../../static/laba.png"></u-notice-bar>
		</view>

		<!-- 宫格菜单 -->
		<view class="menu">
			<view class="menulist" @click="goToappointment(0)">
				<view class="hot">
					热门
				</view>
				<view class="menuicont">
					<image src="../../static/zhixiang.svg" mode=""></image>
				</view>
				<view class="menutext">
					<text>纸箱</text>
				</view>
			</view>
			<view class="menulist" @click="goToappointment(1)">
				<view class="menuicont">
					<image src="../../static/jinshu.png" mode=""></image>
				</view>
				<view class="menutext">
					<text>金属</text>
				</view>
			</view>

			<view class="menulist" @click="goToappointment(2)">
				<view class="menuicont">
					<image src="../../static/shuiping.svg" mode=""></image>
				</view>
				<view class="menutext">
					<text>水瓶</text>
				</view>
			</view>

			<view class="menulist" @click="goToappointment(3)">
				<view class="menuicont">
					<image src="../../static/yifu.svg" mode=""></image>
				</view>
				<view class="menutext">
					<text>纺织物</text>
				</view>
			</view>

			<view class="menulist" @click="goToappointment(4)">
				<view class="hot">
					上新
				</view>
				<view class="menuicont">
					<image src="../../static/bingxiang.png" mode=""></image>
				</view>
				<view class="menutext">
					<text>家电</text>
				</view>
			</view>

			<view class="menulist" @click="goToappointment(5)">
				<view class="menuicont">
					<image src="../../static/qita.svg" mode=""></image>
				</view>
				<view class="menutext">
					<text>其它</text>
				</view>
			</view>

			<view class="menulist" @click="goToguide">
				<view class="menuicont">
					<image src="../../static/fenlei.png" mode=""></image>
				</view>
				<view class="menutext">
					<text>分类指南</text>
				</view>
			</view>

			<view class="menulist" @click="goToshop">
				<view class="hot">
					热门
				</view>
				<view class="menuicont">
					<image src="../../static/shangcheng.png" mode=""></image>
				</view>
				<view class="menutext">
					<text>积分商城</text>
				</view>
			</view>

		</view>

		<!-- 预约回收 -->
		<view class="yuyue">
			<view class="yuyuezhutitle">
				<text>预约下单即可免费上门回收、代扔</text>
			</view>
			<view class="yuyuefutitle">
				<text>旧家电、旧纸箱、旧衣物、生活垃圾等</text>
			</view>
			<view class="button">
				<button @click="goToappointment(0)">立即下单</button>
			</view>
		</view>
		<!-- 预约流程 -->
		<view class="flow">
			<view class="flowtext">
				<text class="num">1</text>
				<text class="text">在线预约</text>
			</view>
			<view class="flowtext">
				<text class="num">2</text>
				<text class="text">免费上门</text>
			</view>
			<view class="flowtext">
				<text class="num">3</text>
				<text class="text">完成订单</text>
			</view>
			<view class="flowtext">
				<text class="num">4</text>
				<text class="text">结算积分</text>
			</view>
		</view>

		<!-- 平台数据 -->
		<view class="data">
			<view class="datatitle">
				<text class="left"></text>
				<text class="right">平台数据</text>
			</view>
			<view class="datatext">
				<view class="datalist">
					<view class="num">
						<text>12345人</text>
					</view>
					<view class="text">
						<text>参与人数</text>
					</view>
				</view>
				<view class="datalist">
					<view class="num">
						<text>4725吨</text>
					</view>
					<view class="text">
						<text>可回收垃圾重量</text>
					</view>
				</view>
				<view class="datalist">
					<view class="num">
						<text>428.5吨</text>
					</view>
					<view class="text">
						<text>生活垃圾重量</text>
					</view>
				</view>

			</view>

		</view>


		<!-- 玩法推荐 -->

		<view class="data">
			<view class="datatitle">
				<text class="left"></text>
				<text class="right">玩法推荐</text>
			</view>
			<!-- 轮播图 -->
			<view class="u-demo-block">

				<u-swiper :list="list3" previousMargin="30" nextMargin="30" circular radius="5" bgColor="#ffffff"></u-swiper>
			</view>

		</view>


		<Tabbar cureentPage='index'></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '../../components/common/Tabbar.vue'
	export default {
		data() {
			return {
				user:[],
				title: 'picker',
				array: ['俊发城', '雨花毓秀', '博汇雅苑', '翰林大观'],
				index: '',
				autoplay: true,
				interval: 2000,
				duration: 500,
				text1: '用户1进行了垃圾回收',
				list3: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],

			}
		},
		components: {
			Tabbar
		},
		mounted() {
			// 全局参数userId
			let userId = uni.getStorageSync('userId');
			// console.log('全局111',userId);
			this.user= uni.getStorageSync('user');
		},
		computed: {
			userId() {
				return this.$store.getters.getUserId;
			}
		},
		onLoad() {

		},
		methods: {
			goToshop() {
				console.log('全局用户', this.user)
				uni.switchTab({
					url: '/pages/shopping/shopping'
				});
			},
			goToguide() {
				uni.switchTab({
					url: '/pages/guide/guide'
				});

			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			goToappointment(index) {
				if(!this.user){
							  uni.navigateTo({
							   url:'../login/login'
							  })
				}
				else{
					uni.navigateTo({
					url: '/pages/appointment/appointment?index=' + index
				});
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.menulist {
		position: relative;

		.hot {
			position: absolute;
			font-size: 10px;
			right: -10rpx;
			top: -10rpx;
			background-color: #E85A35;
			color: white;
			width: 90rpx;
			height: 34rpx;
			border-radius: 17rpx;
			z-index: 99999;
			animation: hotAnimation 1.5s infinite alternate;
			/* 定义动画效果 */
			transform-origin: center;
			/* 调整缩放原点为按钮中心 */
		}

	}

	@keyframes hotAnimation {
		0% {
			transform: scale(1);
			/* 初始状态，按钮正常大小 */
		}

		50% {
			transform: scale(1.1);
			/* 中间状态，按钮放大到1.2倍 */
		}

		100% {
			transform: scale(1);
			/* 结束状态，按钮恢复正常大小 */
		}
	}

	.button {
		animation: buttonAnimation 2s infinite alternate;
		/* 定义动画效果 */
		transform-origin: center;
		/* 调整缩放原点为按钮中心 */
	}

	@keyframes buttonAnimation {
		0% {
			transform: scale(1);
			/* 初始状态，按钮正常大小 */
		}

		50% {
			transform: scale(1.05);
			/* 中间状态，按钮放大到1.2倍 */
		}

		100% {
			transform: scale(1);
			/* 结束状态，按钮恢复正常大小 */
		}
	}

	.u-demo-block {
		margin-top: 70rpx;
		margin-bottom: 140rpx;
	}

	.data {
		position: relative;
		width: 100%;
		margin-top: 80rpx;

		.datatitle {
			position: absolute;
			left: 30rpx;

			.left {
				padding: 10rpx;
				background-color: aquamarine;
				margin-right: 10rpx;
			}
		}

		.datatext {
			display: flex;
			justify-content: space-between;
			margin: 80rpx 30rpx 30rpx 0;
			background-color: aliceblue;

			.datalist {
				margin: 0 10rpx;
				padding: 10rpx;
				text-align: center;

				.num {
					margin: 20rpx 0;
					color: #7DCEA0;
				}

				.text {
					margin: 20rpx 0;
				}
			}
		}
	}

	.flow {
		display: flex;
		margin-top: 20rpx;

		.flowtext {
			margin-left: 10rpx;
			font-size: 10px;

			.num {
				border-radius: 50%;
				padding: 0 5px;
				background-color: aquamarine;
				margin-right: 10rpx;

			}
		}
	}

	.yuyue {
		margin-top: 60rpx;

		.yuyuezhutitle {
			margin-bottom: 30rpx;

			text {
				font-size: 23px;
				font-weight: bold;
			}
		}

		.yuyuefutitle {
			text-align: center;
			margin-bottom: 30rpx;

		}

		button {
			background-color: aqua;
		}
	}

	uni-image>img {
		box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
	}

	.menu {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 90%;
		align-content: center;
		align-items: center;

		.menulist {
			width: 25%;
			align-content: center;
			align-items: center;
			text-align: center;
			margin-top: 30rpx;

			.menuicont {
				image {
					width: 30px;
					height: 30px;

				}
			}
		}
	}

	.notification {
		width: 500rpx;
	}

	.swiper {
		margin: 0 auto;
		width: 95%;
		height: 320rpx;
	}

	.lunbo1 {
		border-radius: 7px;
		background-repeat: no-repeat;
		background-position: center;
		box-shadow: 10px 10px 10px rgba(0, 0, 0, .3);
		height: 310rpx;
		background-size: cover;
		background-image: url(https://n.sinaimg.cn/spider20220113/42/w954h688/20220113/3fe8-432e653b854e559e9017f0fb984f4284.jpg);
	}

	.lunbo2 {
		box-shadow: 10px 10px 10px rgba(0, 0, 0, .3);
		border-radius: 7px;
		height: 310rpx;
		background-size: cover;
		background-image: url(https://img2.baidu.com/it/u=559701909,109259594&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500);
	}

	.lunbo3 {
		box-shadow: 10px 10px 10px rgba(0, 0, 0, .3);
		border-radius: 7px;
		height: 310rpx;
		background-size: cover;
		background-image: url(https://img2.baidu.com/it/u=3153703512,2348674946&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=500);
	}

	.uni-list {
		// position: absolute;
		position: sticky;
		top: 0;
		width: 100%;
		z-index: 999999;
	}

	.uni-input {
		display: flex;
		align-items: center;
		color: #fff;
		font-size: 16px;
		font-weight: bold;
		padding: 0 40px;
		background-color: #9ED9D2;
		height: 120rpx;




		.text {
			margin-right: 20rpx;
		}

		.icon {
			vertical-align: middle;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}



	.contentBac {
		z-index: 99999;
		width: 100%;
		height: 320rpx;
		background-color: #9ED9D2;
		margin: 0;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>